<template>
	<el-form ref="storagePoolInfoForm" :rules="storagePoolInfoRule" :model="createStoragePoolInfo" label-width="80px">
		<el-form-item label="名称" prop="poolName">
			<el-input v-model="createStoragePoolInfo.poolName" placeholder="请输入名称"></el-input>
		</el-form-item>
		<el-form-item label="类型" prop="poolType">
			<el-select v-model="createStoragePoolInfo.poolType" style="width:100%">
				<el-option v-for="item in storagePoolType" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item v-if="createStoragePoolInfo.poolType==='1'" label="副本数" prop="replicaNum">
			<el-input v-model="createStoragePoolInfo.replicaNum"></el-input>
		</el-form-item>
		<div v-if="createStoragePoolInfo.poolType==='3'" class="config-form pl30">
			<span>配置</span>
			<div class="pl20" style="flex-grow: 1;">
				<el-form-item label="数据块数" prop="dataChunks">
					<el-input style="width:85%;margin-right:3%" v-model="createStoragePoolInfo.dataChunks"></el-input>
					<SvgIcon size="20"
						title="数据块数是指纠删码存储池用于存储数据的磁盘数，即k值。k值最小必须为2"
						name="ele-QuestionFilled" />
				</el-form-item>
				<el-form-item  class="mb15" label="校验块数" prop="codingChunks">
					<el-input style="width:85%;margin-right:3%" v-model="createStoragePoolInfo.codingChunks"></el-input>
					<SvgIcon size="20"
						title="校验块是纠删码存储池对数据块进行校验的磁盘，即m值。m值最小必须为1"
						name="ele-QuestionFilled" />
				</el-form-item>
				<el-form-item label="插件">
					<el-select v-model="createStoragePoolInfo.plugin" style="width:85%;margin-right:3%">
						<el-option v-for="plugin in pluginList" :key="plugin.label" :label="plugin.label" :value="plugin.value"></el-option>
					</el-select>
					<SvgIcon size="20"
						title="一般情况下jerasure插件已经能够满足您的使用需求。但是当您的服务器使用的Intel处理器时，使用isa插件能够提供更好的性能"
						name="ele-QuestionFilled" />
				</el-form-item>
			</div>
		</div>
		<el-form-item label="pg">
			<el-input v-model="createStoragePoolInfo.pgNum" disabled></el-input>
		</el-form-item>
		<el-form-item label="pgp数">
			<el-input v-model="createStoragePoolInfo.pgpNum" disabled></el-input>
		</el-form-item>
		<el-form-item label="故障域">
			<el-input disabled value="host"></el-input>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, defineExpose } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { useStorageApi } from '/@/api/storage';
const storageApi = useStorageApi();

interface createStoragePoolInfoSatate {
	createStoragePoolInfo: {
		poolName: string,
		poolType: string|null,
		replicaNum: number,
		dataChunks: string| null,
			codingChunks: string| null,
			plugin: string | number,
		pgNum: number,
		pgpNum: number
	}
}

let state = reactive<createStoragePoolInfoSatate>({
	createStoragePoolInfo: {
		poolName: '',
		poolType: null,
		replicaNum: 3,
		// min: 2
		dataChunks: null,
		// min: 1
		codingChunks: null,
		plugin: 0,
		pgNum: 32,
		pgpNum: 32
	}
});
let { createStoragePoolInfo } = toRefs(state);
const storagePoolType = [
	{ label: '副本池', value: '1' },
	{ label: '纠删码池', value: '3' }
];

const pluginList = [
	{ label: 'jerasure', value: 0 },
	{ label: 'isa', value: 1 }
];

const checkReplicaNum = (rule: any, value: any, callback: any) => {
	if (!value) {
		callback(new Error('请输入副本数'));
	}
	if (isNaN(value)) {
		callback(new Error('请输入数字'));
	}
	if (!/^[1-9]\d*$/.test(value)) {
		return callback(new Error('只能输入正整数'));
	}
	callback();
};
const checkDataChunks = (rule: any, value: any, callback: any) => {
	if (!value) {
		callback(new Error('请输入数据块数'));
	}
	if (isNaN(value)) {
		callback(new Error('请输入数字'));
	}
	if (!/^[1-9]\d*$/.test(value)) {
		return callback(new Error('只能输入正整数'));
	}
	callback();
};
const checkCodingChunks = (rule: any, value: any, callback: any) => {
	if (!value) {
		callback(new Error('请输入校验块数'));
	}
	if (isNaN(value)) {
		callback(new Error('请输入数字'));
	}
	if (!/^[1-9]\d*$/.test(value)) {
		return callback(new Error('只能输入正整数'));
	}
	callback();
};
const storagePoolInfoForm = ref<FormInstance>();
const storagePoolInfoRule = reactive<FormRules>({
	poolName: [
		{ required: true, message: '请输入存储池名称', trigger: 'blur' }
	],
	poolType: [
		{ required: true, message: '请选择存储池类型', trigger: 'blur' }
	],
	replicaNum: [
		{ required: true, message: '不能为空', trigger: 'blur' },
		{ validator: checkReplicaNum, trigger: 'blur' }
	],
	dataChunks: [
		{ required: true, message: '不能为空', trigger: 'blur' },
		{ validator: checkDataChunks, trigger: 'blur' }
	],
	codingChunks: [
		{ required: true, message: '不能为空', trigger: 'blur' },
		{ validator: checkCodingChunks, trigger: 'blur' }
	],
});

const createStoragePool = () => {
	let params = {};
	const { poolName, poolType, pgNum, pgpNum } = createStoragePoolInfo.value;
	if (createStoragePoolInfo.value.poolType === '3') {
		const { dataChunks, codingChunks, plugin } = createStoragePoolInfo.value;
		params = {
			poolName,
			poolType,
			ecProfile: { dataChunks, codeChunks: codingChunks, plugin },
			pgNum,
			pgpNum
		};
	} else {
		const { replicaNum } = createStoragePoolInfo.value;
		params = {
			poolName,
			poolType,
			replicaNum,
			pgNum,
			pgpNum
		};
	}
	return new Promise<any>((resolve, reject) => {
		if (storagePoolInfoForm.value) {
			storagePoolInfoForm.value?.validate((valid) => {
				if (!valid) { reject(); return; }
				storageApi.createStoragePool(params).then((res) => {
					resolve(res);
				}).catch(() => {
					reject();
				});
			});
		} else {
			reject();
		}
	});
};
defineExpose({
	createStoragePool
});

</script>

<style scoped>
.config-form{
	display: flex;
	align-items: center;
}
</style>

